<template>
	<view class="FlashExchangeOfTokens" :class='equipment'>
		<view class="FlashExchangeOfTokens_top">
			<u-count-down :time="res.end_time" format="HH:mm:ss" autoStart millisecond @change="onChange">
				<view class="time">
					<view class="time__custom">
						<text class="time__custom__item">{{ timeData.hours>10?timeData.hours:'0'+timeData.hours}}</text>
					</view>
					<text class="time__doc">:</text>
					<view class="time__custom">
						<text class="time__custom__item">{{ timeData.minutes }}</text>
					</view>
					<text class="time__doc">:</text>
					<view class="time__custom">
						<text class="time__custom__item">{{ timeData.seconds }}</text>
					</view>
				</view>
			</u-count-down>
			<h1>{{res.status}}</h1>
		</view>
		<view class="FlashExchangeOfTokens_box">
			<view class="FlashExchangeOfTokens_box_">
				<view class="FlashExchangeOfTokens_box_item" :class='showIndex == index?"flag":""'
					v-for="(item,index) in res.dui_list" :key="index" @click="showIndex = index,num = item.num">
					<h3>{{item.num}}</h3>YMD
				</view>
			</view>
			<view class="FlashExchangeOfTokens_box_button" @click="num?show = true:showinteraction('请选择抢购数量')">
				去抢购
			</view>
		</view>



		<u-modal :closeOnClickOverlay="true" :show="show" title="温馨提示" content='确认抢购当前数量的YMD'
			@confirm="api_index_flash_exchange_subFun" :showCancelButton='true' @cancel='show = !show'
			@close="show = !show"></u-modal>


		<u-modal :show="res.isopen === '0'" title="温馨提示" content='活动未开始' @confirm="Toback()"></u-modal>
	</view>
</template>

<script>
	import {
		api_index_flash_exchange_index,
		api_index_flash_exchange_sub
	} from '@/api/member.js'
	export default {
		data() {
			return {
				equipment: '',
				timeData: {},
				res: '',
				showIndex: null,
				num: null,
				openid: '',
				show: false,
			};
		},
		onLoad() {
			uni.getStorage({
				key: 'openid',
				success: (res) => {
					this.openid = res.data;
				},
				fail: () => {
					uni.reLaunch({
						url: '/pages/login/login'
					});
				}
			});
			if (process.env.UNI_PLATFORM === 'h5') {
				// 在H5环境中打开
				console.log('在H5环境中打开');
				this.equipment = 'H5'
			} else if (process.env.UNI_PLATFORM === 'app-plus') {
				// 在App环境中打开
				console.log('在App环境中打开');
				this.equipment = 'App'
			}
			this.api_index_flash_exchange_indexFun();
		},
		methods: {
			Toback() {
				uni.navigateBack({
					delta: 1
				})
			},
			async api_index_flash_exchange_subFun() {
				let up = {
					openid: this.openid,
					num: this.num
				}
				if (up.num === null && this.res.status === '进行中') {
					this.showinteraction('请选择抢购数量');
					return
				}
				let data = await api_index_flash_exchange_sub(up);
				console.log(data);
				if (data.error === 0) {
					this.showinteraction("恭喜抢购成功");
					setTimeout(() => {
						this.Toback()
					}, 1000)
				}

				// this.api_index_flash_exchange_indexFun();
				this.show = !this.show;

			},
			async api_index_flash_exchange_indexFun() {
				let data = await api_index_flash_exchange_index();
				this.res = data;
			},
			//提示
			showinteraction(title, icon = 'none') {
				uni.showToast({
					title,
					icon,
					duration: 2000,
					mask: false
				})
			},
			onChange(e) {
				this.timeData = e
			}
		}
	}
</script>

<style lang="scss">
	.H5 {
		height: calc(100vh - 88rpx);
	}

	.App {
		height: 100vh;
	}

	.FlashExchangeOfTokens {
		width: 100%;
		background-image: url('@/static/member/jltbj.png');
		background-size: calc(100% + 10rpx) 100%;
		background-repeat: no-repeat;
		padding: 40rpx;

		.FlashExchangeOfTokens_top {
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 60rpx 0;

			h1 {
				margin: 0 20rpx;
				font-size: 44rpx;
				color: #fff;
			}
		}

		.FlashExchangeOfTokens_box {
			width: 100%;
			height: 912rpx;
			background-color: #FFFFFF;
			border-radius: 30rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-between;

			.FlashExchangeOfTokens_box_ {
				width: 100%;
				height: 700rpx;
				margin: 20rpx 0;
				border-radius: 30rpx;
				display: flex;
				flex-wrap: wrap;
				align-content: flex-start;
				padding: 20rpx;
				overflow-y: scroll;
				position: relative;

				.FlashExchangeOfTokens_box_item {
					width: calc(33.33% - 20rpx);
					height: 130rpx;
					background-color: #606266;
					margin: 10rpx;
					display: flex;
					justify-content: center;
					// align-items: center;
					font-size: 26rpx;
					background-color: #FFFFFF;
					box-shadow: 0 0 10rpx #ccc;
					color: #FF5326;
					border-radius: 40rpx;
					line-height: 130rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					text-wrap: nowrap;

					h3 {
						font-size: 40rpx;
						line-height: 120rpx;
					}
				}

				.flag {
					border: #FF5326 2rpx solid;
					box-shadow: none;
				}
			}

			.FlashExchangeOfTokens_box_button {
				width: 80%;
				height: 80rpx;
				border-radius: 80rpx;
				text-align: center;
				line-height: 80rpx;
				font-size: 40rpx;
				color: #fff;
				background-color: #ff5326;
				margin-bottom: 40rpx;
			}



		}
	}














	.time {
		@include flex;
		align-items: center;

		&__custom {
			margin-top: 4px;
			width: 80rpx;
			height: 80rpx;
			background-color: #333;
			border-radius: 4px;
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			justify-content: center;
			align-items: center;

			&__item {
				color: #fff;
				font-size: 40rpx;
				text-align: center;
			}
		}

		&__doc {
			color: $u-primary;
			padding: 0px 4px;
		}

		&__item {
			color: #606266;
			font-size: 15px;
			margin-right: 4px;
		}
	}
</style>